<template>
  <ElDescriptions :border="true" :column="3">
    <ElDescriptionsItem label="购物单编号">
      <ElTag>{{ purchaseBill.billId }}</ElTag>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="供货商" :span="2">
      <div>{{ purchaseBill.supplier }}</div>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="订货日期">
      <div>{{ purchaseBill.orderDate }}</div>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="交货日期">
      <div>{{ purchaseBill.receiveDate }}</div>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="单据状态">
      <div>{{ purchaseBill.billState }}</div>
    </ElDescriptionsItem>
  </ElDescriptions>
  <ElDivider></ElDivider>
  <ElTable :data="purchaseBill.items" show-summary :summary-method="summaryMethod">
    <ElTableColumn prop="goodsName" label="物品名称"></ElTableColumn>
    <ElTableColumn prop="goodsCode" label="物品编号"></ElTableColumn>
    <ElTableColumn prop="price" label="单价"></ElTableColumn>
    <ElTableColumn prop="quantity" label="数量"></ElTableColumn>
    <ElTableColumn label="金额">
      <template #default="{ row }">
        <div>{{ (row.price * row.quantity).toFixed(2) }}</div>
      </template>
    </ElTableColumn>
  </ElTable>

  <ElDivider></ElDivider>
  <ElDescriptions :border="true" :column="3">
    <ElDescriptionsItem label="审核人">
      <slot name="auditor">
        <div>{{ purchaseBill.auditor }}</div>
      </slot>
    </ElDescriptionsItem>
    <ElDescriptionsItem></ElDescriptionsItem>
    <ElDescriptionsItem label="申请人">
      <slot name="applier" :abc="sampleD" :val="purchaseBill.applier">
        <div>{{ purchaseBill.applier }}</div>
      </slot>
    </ElDescriptionsItem>
    <ElDescriptionsItem label="审核时间">{{ purchaseBill.auditTime }}</ElDescriptionsItem>
    <ElDescriptionsItem></ElDescriptionsItem>
    <ElDescriptionsItem label="申请时间">{{ purchaseBill.applyTime }}</ElDescriptionsItem>
    <ElDescriptionsItem label="审核意见">
      <slot name="auditMsg">
        <div>{{ purchaseBill.auditMsg }}</div>
      </slot>
    </ElDescriptionsItem>
  </ElDescriptions>
</template>
<script lang="ts">
import { PurchaseItem, PurchaseBill } from '@/entity/purchase.entity'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default defineComponent({
  name: 'ReadOnlyPurchase',
  props: {
    sampleP: {
      type: Number,
      default: 0
    },
    purchaseBill: {
      type: PurchaseBill,
      default: function () {
        return {
          billId: 'PB16874060029610026',
          supplier: 'tesla实验室-SC009',
          orderDate: '2023-06-05T16:00:00.000Z',
          receiveDate: '2023-06-21T16:00:00.000Z',
          billState: 'toSubmit',

          applier: 'zhangsan001',
          auditor: 'wangwu006',
          applyTime: null,
          auditTime: null,
          auditMsg: 'take care',

          items: [
            {
              price: 12.05,
              quantity: 40,

              goodsCode: 'MT16828553890490023',
              goodsName: '开关',

              itemId: 0,
              billFk: 'PB16874060029610026',
              priority: 0
            },
            {
              itemId: 1,
              billFk: 'PB16874060029610026',
              priority: 1,
              goodsCode: 'MT16838823678220033',
              goodsName: '示波器',
              price: 2236,
              quantity: 2
            }
          ] as Array<PurchaseItem>,
          amount: 4520.2,
          nextItemId: 2,
          history: '',
          updateTime: '2023-06-22T03:53:23.000Z'
        } as PurchaseBill
      }
    }
  },
  data() {
    return {
      sampleD: 'value_of_son'
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    summaryMethod() {
      let a = []
      a[0] = '总计'
      a[4] = this.purchaseBill.amount.toFixed(2)
      return a
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
// css 深度选择器 :deep()

:deep(.el-descriptions__label) {
  width: 100px;
}
:deep(.el-descriptions__content) {
  width: 200px;
}

</style>
